Feature: JSON-LD 추가 #76
Conversation
src/components/JsonLD/JsonLD.tsx
Outdated
There was a problem hiding this comment.
layout.tsx에서만 사용되는 컴포넌트인만큼,, 따로 빼서 컴포넌트 폴더를 늘리는 것 보다 한 파일 내에서 선언하면 좋을 것 같습니다..!
There was a problem hiding this comment.
layout.tsx파일 하나에 전부 넣으면 코드의 가독성을 해치지 않을까 해서 분리를했습니다. 예들 들어 현재 layout.tsx에 있는 Analytics처럼요. QueryProvider와 RecoilProvider는 RCC라 분리가 불가피한 컾모넌트라고 생각합니다.
정리하면, 가독성을 위해 컴포넌트는 분리하는 것이 좋다고 생각하며 저희가 최근에 구두로 정한 컴포넌트 구조 컨벤션처럼, layout.tsx에서 사용하는 컴포넌트는 layout.tsx와 동일한 depth에 작성하는 방안을 제안합니다.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -21,6 +22,7 @@ export default function RootLayout({ children }: PropsWithChildren) { | |||
| <Suspense> | |||
| <Analytics /> | |||
| </Suspense> | |||
| <JsonLD /> | |||
| <QueryProvider> | |||
| <RecoilProvider> | |||
| <OverlayProvider>{children}</OverlayProvider> | |||
There was a problem hiding this comment.
-
JsonLD컴포넌트를 가져오기 위해 새로운 import 문이 추가되었습니다. 이 코드 변경은 기능적인 면에서 안전합니다. -
RootLayout함수 내에서<JsonLD />컴포넌트가 Suspense 컴포넌트로 감싸여 있지 않습니다. 만약JsonLD컴포넌트가 데이터를 비동기적으로 로드한다면, Suspense로 감쌀 것을 고려해 볼 수 있습니다. -
코드 리뷰에는 주로 더 많은 context나 페이지 전반의 처리 방식이 필요하지만, 해당 코드 조각 자체가 작아서 뚜렷한 문제점이 나타나지는 않습니다.
There was a problem hiding this comment.
React Suspense는 주로 비동기 작업(데이터 패칭, 지연 로딩 컴포넌트)을 처리하기 위해 사용합니다. JSON-LD스크립트는 정적 메타 데이터로, 비동기 로딩이 필요하지 않습니다.
또한, Suspense로 감싸면 서버에서 렌더링을 하지 않기 때문에 내부 컴포넌트의 렌더링에 있어서 지연이 발생해 SEO에 부정적인 영향을 미칠 수 있습니다.
| <Analytics /> | ||
| </Suspense> | ||
| <Analytics /> | ||
| <JsonLD /> | ||
| <QueryProvider> | ||
| <RecoilProvider> | ||
| <OverlayProvider>{children}</OverlayProvider> |
There was a problem hiding this comment.
이 코드 패치는 대부분 좋아 보입니다. 개선 제안은 다음과 같습니다:
- Suspense 구성 요소에서 Error Boundary가 없으므로 코드에서 발생할 수 있는 오류를 처리하는 방법을 고려할 필요가 있습니다.
- JsonLD 컴포넌트의 위치는 Analytics 컴포넌트 다음에 배치되어 있지만, JsonLD 컴포넌트의 의존성 및 논리적 순서를 고려하여 올바른 위치에 배치되었는지 확인해야 합니다.
What is this PR? 🔍
Changes 📝
JSON-LD는 구조화된 데이터를 크롤링 봇에 제공해줌으로써, 검색 엔진에 더 구조화되어 노출되도록 해주는 방식입니다.
AS-IS
TO-BE (예시)